<!-- @format -->

<template>
  <div class="mb-3">
    <base-card :title="item.topic">
      <template #titleAction>
        <van-tag v-if="item.state === 5 || item.state === 3" type="danger">{{ item.stateDesc }}</van-tag>
        <van-tag v-if="item.state === 2" type="success">{{ item.stateDesc }}</van-tag>
        <van-tag v-if="item.state === 1 || item.state === 4" type="primary">{{ item.stateDesc }}</van-tag>
      </template>
      <div class="card-container">
        <van-cell title="会议类型">{{ item.shapeDesc }}</van-cell>
        <van-cell title="会议时间">{{ item.startTime }}</van-cell>
        <van-cell title="腾讯会议" v-if="item.shape == 1 ">
          {{ item.meetingNo || '' }}
          <van-button
            size="mini"
            icon="column"
            class="ml-2"
            @click.stop="clickCopy(item)"
          >复制</van-button>
        </van-cell>
        <van-cell title="会议总费用">￥{{ getPrice(item.meetingTotalCost || 0) }}</van-cell>
        <!-- <van-cell title="会议海报">
          <van-button
            size="mini"
            class="ml-2"
            @click.stop="clickPoster"
          >点击查看</van-button>
        </van-cell> -->
        <van-cell title="参会讲者信息完善进度">
          <van-tag plain :type="!item.zancunNum ? 'success' : 'danger'">{{ item.totalSpeakerCount-item.zancunNum }} / {{ item.totalSpeakerCount }}</van-tag>
          <van-icon @click.stop="showSpeakerInfoProgress(1)" name="question-o" />
        </van-cell>
        <van-cell title="讲者劳务协议进度">
          <van-tag plain :type="item.signedAgreementsCount === item.totalSpeakerCount ? 'success' : 'danger'">{{ item.signedAgreementsCount }} / {{ item.totalSpeakerCount }}</van-tag>
          <van-icon @click.stop="showSpeakerInfoProgress(2)" name="question-o" />
        </van-cell>
        <van-cell title="会议支持" v-if="item.shape == 2">
          <van-button
            size="mini"
            class="ml-2"
            @click.stop="clickWxGroup"
          >点击查看</van-button>
        </van-cell>
      </div>
      <div class="card-handle van-hairline--top">
        <div class="text-danger" v-if="[1,2,4].includes(item.state)" @click="clickCancel">
          <van-icon name="delete-o" />
          <span> 取消会议</span>
        </div>
        <!-- <div class="text-danger" v-if="[4].includes(item.state)" @click="clickDelete">
          <van-icon name="delete-o" />
          <span> 删除会议</span>
        </div> -->
        <div class="text-primary" v-if="[3,4].includes(item.state)" @click="clickUpdate">
          <van-icon name="edit" />
          <span> 编辑会议</span>
        </div>
        <div class="text-primary" v-if="[1,2].includes(item.state)" @click="clickDetail">
          <van-icon name="eye-o" />
          <span> 会议详情</span>
        </div>
        <div class="text-primary" v-if="[2].includes(item.state) && item.shape == 2" @click="clickSettle">
          <van-icon name="cash-back-record-o" />
          <span> 会议结算</span>
        </div>
      </div>
    </base-card>
  </div>
  <van-action-sheet
    v-model:show="poster.visible"
    title="长按保存图片"
    @close="clickClosePoster"
  >
    <img style="max-width: 100%; vertical-align: middle;" :src="poster.url" />
  </van-action-sheet>

  <van-dialog
    v-model:show="groupChat.visible"
    title="会议支持微信群二维码"
  >
    <div class="pt-4 pl-4 pr-4 pb-4">
      <img style="max-width: 100%; vertical-align: middle;" :src="groupChat.url" />
    </div>
  </van-dialog>
</template>

<script setup>
import useClipboard from 'vue-clipboard3'
import { showSuccessToast, showToast, showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router'
import { toRefs, reactive, inject } from 'vue'
import useUtils from '@/hooks/useUtils'

const emits = defineEmits(['refresh'])
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  }
})
const api = inject('api');
const { toClipboard } = useClipboard()
const router = useRouter();
const { getPrice } = useUtils();

const poster = reactive({
  visible: false,
  url: ''
})
// 点击删除会议
function clickDelete () {
  const { item } = toRefs(props)
  showConfirmDialog({
    title: '温馨提示',
    message: '确定删除本场会议吗？',
  }).then(() => {
    return api.meetingDelete(item.value.id)
  }).then(() => {
    showToast('删除成功');
    emits('refresh');
  }).catch((err) => {
    err.message && showToast(err.message);
  })
}
// 点击取消会议
function clickCancel () {
  const { item } = toRefs(props)
  showConfirmDialog({
      title: '温馨提示',
      message: '确定取消本场会议吗？',
    }).then(() => {
      return api.meetingCancel(item.value.id)
    }).then(() => {
      showToast('取消成功');
      emits('refresh');
    }).catch((err) => {
      err.message && showToast(err.message);
    })
}
// 点击编辑
function clickUpdate () {
  const { item } = toRefs(props)
  router.push({
    path: `/vol/apply-meeting/${item.value.id}`,
    query: {
      handleType: 'update'
    }
  })
}
// 会议结算
function clickDetail () {
  const { item } = toRefs(props)
  router.push({
    path: `/vol/apply-meeting/${item.value.id}`,
    query: {
      handleType: 'detail'
    }
  })
}
// 会议结算
function clickSettle () {
  const { item } = toRefs(props)
  router.push({
    path: `/vol/settle-meeting/${item.value.id}`
  })
}

// 查看海报
function clickPoster () {
  const { item } = toRefs(props)
  if (!item.value.poster) {
    showToast('海报正在生成中...')
    return
  }
  poster.url = `//${item.value.poster}`
  poster.visible = true;
  // router.push(`/poster/${item.value.id}`)
}

const groupChat = reactive({
  visible: false,
  url: ''
})
// 点击查看会议群聊二维码
function clickWxGroup () {
  const { item } = toRefs(props)
  if (!item.value.qrCode) {
    showToast('暂未设置群聊')
    return
  }
  groupChat.url = item.value.qrCode
  groupChat.visible = true
}

function clickClosePoster () {
  poster.visible = false;
}
const clickCopy = async (item) => {
	try {
		await toClipboard(`腾讯会议\n讲题:${item.topic}\n主席:${item.zhuxiNameList.join('、')}\n会议号：${item.meetingNo||''}\n入会链接：${item.meetingUrl}`)
		showSuccessToast('复制成功')
	} catch (err) {
		showToast('复制失败')
	}
}

function showSpeakerInfoProgress(type) {
  showConfirmDialog({
    title: '温馨提示',
    showCancelButton: false,
    confirmButtonText: '知道了',
    message: type === 1 ? '已完善信息讲者数量 / 参会讲者总数' : '已签署劳务协议讲者数量 / 参会讲者总数',
  }).then(() => {
      // on confirm
  }).catch(() => {
      // on cancel
  });
}
</script>

<style lang="less">
</style>
